import React, {
  Component
} from 'react'
var Row = require('antd/lib/row')
var Col = require('antd/lib/col')

import ProductItem from '../productItem/index.js'


class ListTypeTwo extends Component {
  state = {
    number: 6 //每行的数量，下面函数根据宽高计算
  }

  changeLayout() {
    let a = document.body.clientWidth
    if(a<=1600) {
      this.setState({
        number: 8
      })
    } else {
      this.setState({
        number: 6
      })
    }   
  }

  componentDidMount() {
    this.changeLayout()
    let that = this
    window.onresize = function(){
      that.changeLayout()
    }
  }

  componentWillReceiveProps(nextProps) {
    this.changeLayout()
  }
  render() {

    const products = this.props.listData

    return (
      <div className='productList' id='productList'>
            {this.props.searchIn!='' ?
                (
                    <div className='flex-list'>
                      {products.map((item,index)=>(
                                                  <div
                                                  key={index}
                                                  className='listPartTwo' >
                                                    <ProductItem productinfo={item}/>
                                                  </div>
                                              ))}
                      </div>
                )
                : 
                (
                  <Row>{
                    products.map((item,index)=>(
                       <Col span={this.state.number} key={index}>
                          <div>
                            <ProductItem productinfo={item}/>
                          </div> 
                       </Col>
                                
                      ))
                  }
                  </Row>
                )
            }
      </div>
    )
  }
}


export default ListTypeTwo